<template>
  <div class="bug-center">
    <!-- 统计卡片区域 -->
    <div class="stats-grid">
      <div class="stat-card" v-for="stat in statistics" :key="stat.title">
        <div class="stat-icon" :class="stat.color">
          <i :class="stat.icon"></i>
        </div>
        <div class="stat-info">
          <h3>{{ stat.value }}</h3>
          <p>{{ stat.title }}</p>
        </div>
        <div class="stat-trend" :class="stat.trend > 0 ? 'up' : 'down'">
          <i :class="stat.trend > 0 ? 'fas fa-arrow-up' : 'fas fa-arrow-down'"></i>
          {{ Math.abs(stat.trend) }}%
        </div>
      </div>
    </div>

    <!-- 操作按钮区 -->
    <div class="action-bar">
      <div class="left-actions">
        <el-button type="primary" @click="createBugReport">
          <i class="fas fa-plus"></i> 新建缺陷
        </el-button>
        <el-button @click="refreshData">
          <i class="fas fa-sync-alt"></i> 刷新
        </el-button>
      </div>
      <div class="right-actions">
        <el-input
          v-model="searchQuery"
          placeholder="搜索缺陷..."
          prefix-icon="el-icon-search"
          clearable
        >
        </el-input>
        <el-select v-model="filterStatus" placeholder="状态筛选">
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
    </div>

    <!-- 缺陷列表 -->
    <div class="bug-list">
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane label="所有缺陷" name="all">
          <div class="bug-cards">
            <div 
              v-for="bug in filteredBugs" 
              :key="bug.id"
              class="bug-card"
              @click="showBugDetail(bug)"
            >
              <div class="bug-header">
                <span class="bug-id">#{{ bug.id }}</span>
                <el-tag :type="getStatusType(bug.status)">{{ bug.status }}</el-tag>
              </div>
              <h3 class="bug-title">{{ bug.title }}</h3>
              <p class="bug-desc">{{ bug.description }}</p>
              <div class="bug-meta">
                <div class="bug-priority" :class="bug.priority">
                  <i class="fas fa-flag"></i>
                  {{ bug.priority }}
                </div>
                <div class="bug-assignee">
                  <el-avatar :size="24" :src="bug.assignee.avatar"></el-avatar>
                  <span>{{ bug.assignee.name }}</span>
                </div>
                <div class="bug-date">
                  <i class="far fa-clock"></i>
                  {{ formatDate(bug.createdAt) }}
                </div>
              </div>
              <div class="bug-progress">
                <div class="progress-text">
                  <span>解决进度</span>
                  <span>{{ bug.progress }}%</span>
                </div>
                <el-progress 
                  :percentage="bug.progress"
                  :color="getProgressColor(bug.progress)"
                ></el-progress>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="我的缺陷" name="mine"></el-tab-pane>
        <el-tab-pane label="待处理" name="pending"></el-tab-pane>
        <el-tab-pane label="已解决" name="resolved"></el-tab-pane>
      </el-tabs>
    </div>

    <!-- 缺陷详情弹窗 -->
    <el-dialog
      :visible.sync="showDetailDialog"
      width="60%"
      class="bug-detail-dialog"
    >
      <template #title>
        <div class="dialog-title">
          <span>缺陷详情 #{{ currentBug?.id }}</span>
          <el-tag :type="getStatusType(currentBug?.status)">
            {{ currentBug?.status }}
          </el-tag>
        </div>
      </template>
      
      <div class="bug-detail" v-if="currentBug">
        <div class="detail-header">
          <h2>{{ currentBug.title }}</h2>
          <div class="detail-meta">
            <span class="priority" :class="currentBug.priority">
              <i class="fas fa-flag"></i>
              {{ currentBug.priority }}优先级
            </span>
            <span>
              <i class="far fa-clock"></i>
              创建于 {{ formatDate(currentBug.createdAt) }}
            </span>
            <span>
              <i class="fas fa-user"></i>
              报告人: {{ currentBug.reporter }}
            </span>
          </div>
        </div>

        <el-divider></el-divider>

        <div class="detail-content">
          <div class="detail-section">
            <h3>问题描述</h3>
            <p>{{ currentBug.description }}</p>
          </div>

          <div class="detail-section">
            <h3>复现步骤</h3>
            <ol>
              <li v-for="(step, index) in currentBug.steps" :key="index">
                {{ step }}
              </li>
            </ol>
          </div>

          <div class="detail-section">
            <h3>相关截图</h3>
            <div class="image-gallery">
              <el-image
                v-for="(img, index) in currentBug.images"
                :key="index"
                :src="img"
                :preview-src-list="currentBug.images"
              >
              </el-image>
            </div>
          </div>

          <div class="detail-section">
            <h3>解决进度</h3>
            <el-progress 
              :percentage="currentBug.progress"
              :color="getProgressColor(currentBug.progress)"
            ></el-progress>
          </div>
        </div>

        <el-divider></el-divider>

        <div class="detail-comments">
          <h3>评论记录</h3>
          <div class="comment-list">
            <div 
              v-for="comment in currentBug.comments" 
              :key="comment.id"
              class="comment-item"
            >
              <el-avatar :size="32" :src="comment.user.avatar"></el-avatar>
              <div class="comment-content">
                <div class="comment-header">
                  <span class="comment-user">{{ comment.user.name }}</span>
                  <span class="comment-time">{{ formatDate(comment.time) }}</span>
                </div>
                <p class="comment-text">{{ comment.content }}</p>
              </div>
            </div>
          </div>
          
          <div class="comment-input">
            <el-input
              type="textarea"
              v-model="newComment"
              :rows="3"
              placeholder="添加评论..."
            >
            </el-input>
            <el-button type="primary" @click="addComment">发表评论</el-button>
          </div>
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showDetailDialog = false">关闭</el-button>
          <el-button type="success" @click="resolveBug">
            <i class="fas fa-check"></i> 标记已解决
          </el-button>
          <el-button type="primary" @click="assignBug">
            <i class="fas fa-user-plus"></i> 分配处理人
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 新建缺陷弹窗 -->
    <el-dialog
      title="新建缺陷"
      :visible.sync="showCreateDialog"
      width="50%"
    >
      <el-form :model="newBug" :rules="bugRules" ref="bugForm" label-width="100px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="newBug.title" placeholder="请输入缺陷标题"></el-input>
        </el-form-item>
        
        <el-form-item label="描述" prop="description">
          <el-input 
            type="textarea" 
            v-model="newBug.description" 
            :rows="4"
            placeholder="请详细描述缺陷情况"
          ></el-input>
        </el-form-item>
        
        <el-form-item label="优先级" prop="priority">
          <el-select v-model="newBug.priority" placeholder="请选择优先级">
            <el-option label="低" value="low"></el-option>
            <el-option label="中" value="medium"></el-option>
            <el-option label="高" value="high"></el-option>
            <el-option label="紧急" value="urgent"></el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item label="复现步骤">
          <div v-for="(step, index) in newBug.steps" :key="index" class="step-item">
            <el-input v-model="newBug.steps[index]" placeholder="请输入步骤描述">
              <template #append>
                <el-button @click="removeStep(index)" icon="el-icon-delete"></el-button>
              </template>
            </el-input>
          </div>
          <el-button type="text" @click="addStep">
            <i class="el-icon-plus"></i> 添加步骤
          </el-button>
        </el-form-item>
        
        <el-form-item label="相关截图">
          <el-upload
            action="#"
            list-type="picture-card"
            :auto-upload="false"
            :on-change="handleImageChange"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showCreateDialog = false">取消</el-button>
          <el-button type="primary" @click="submitBug">提交</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'BugCenter',
  
  data() {
    return {
      // 统计数据
      statistics: [
        {
          title: '总缺陷数',
          value: 256,
          icon: 'fas fa-bug',
          color: 'blue',
          trend: 12
        },
        {
          title: '待处理',
          value: 45,
          icon: 'fas fa-clock',
          color: 'orange',
          trend: -5
        },
        {
          title: '已解决',
          value: 189,
          icon: 'fas fa-check-circle',
          color: 'green',
          trend: 8
        },
        {
          title: '解决率',
          value: '92%',
          icon: 'fas fa-chart-line',
          color: 'purple',
          trend: 3
        }
      ],
      
      // 搜索和筛选
      searchQuery: '',
      filterStatus: '',
      activeTab: 'all',
      
      // 状态选项
      statusOptions: [
        { label: '全部', value: '' },
        { label: '待处理', value: 'pending' },
        { label: '处理中', value: 'processing' },
        { label: '已解决', value: 'resolved' },
        { label: '已关闭', value: 'closed' }
      ],
      
      // 缺陷列表
      bugs: [],
      
      // 弹窗控制
      showDetailDialog: false,
      showCreateDialog: false,
      
      // 当前选中的缺陷
      currentBug: null,
      
      // 新建缺陷表单
      newBug: {
        title: '',
        description: '',
        priority: '',
        steps: [''],
        images: []
      },
      
      // 新评论
      newComment: '',
      
      // 表单验证规则
      bugRules: {
        title: [
          { required: true, message: '请输入缺陷标题', trigger: 'blur' },
          { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入缺陷描述', trigger: 'blur' }
        ],
        priority: [
          { required: true, message: '请选择优先级', trigger: 'change' }
        ]
      }
    }
  },
  
  computed: {
    filteredBugs() {
      return this.bugs.filter(bug => {
        const matchQuery = bug.title.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
                         bug.description.toLowerCase().includes(this.searchQuery.toLowerCase());
        const matchStatus = !this.filterStatus || bug.status === this.filterStatus;
        return matchQuery && matchStatus;
      });
    }
  },
  
  created() {
    this.fetchBugs();
  },
  
  methods: {
    // 获取缺陷列表
    async fetchBugs() {
      try {
        // 模拟API调用
        this.bugs = [
          {
            id: 1,
            title: '登录页面响应缓慢',
            description: '在高并发情况下，登录页面加载时间超过3秒',
            status: 'processing',
            priority: 'high',
            progress: 75,
            assignee: {
              name: '张工',
              avatar: 'https://api.dicebear.com/7.x/avatars/svg?seed=Felix'
            },
            reporter: '李工',
            createdAt: '2024-03-18',
            steps: [
              '打开登录页面',
              '模拟1000个并发请求',
              '观察页面加载时间'
            ],
            images: [
              'https://via.placeholder.com/300',
              'https://via.placeholder.com/300'
            ],
            comments: [
              {
                id: 1,
                user: {
                  name: '张工',
                  avatar: 'https://api.dicebear.com/7.x/avatars/svg?seed=Felix'
                },
                content: '已经定位到问题，是缓存配置导致的',
                time: '2024-03-18 14:30'
              }
            ]
          }
          // 更多缺陷数据...
        ];
      } catch (error) {
        console.error('获取缺陷列表失败:', error);
        this.$message.error('获取缺陷列表失败');
      }
    },
    
    // 格式化日期
    formatDate(date) {
      return new Date(date).toLocaleDateString();
    },
    
    // 获取状态类型
    getStatusType(status) {
      const types = {
        'pending': 'warning',
        'processing': 'primary',
        'resolved': 'success',
        'closed': 'info'
      };
      return types[status] || 'info';
    },
    
    // 获取进度条颜色
    getProgressColor(progress) {
      if (progress < 30) return '#ff4949';
      if (progress < 70) return '#ffa500';
      return '#13ce66';
    },
    
    // 显示缺陷详情
    showBugDetail(bug) {
      this.currentBug = bug;
      this.showDetailDialog = true;
    },
    
    // 创建缺陷报告
    createBugReport() {
      this.showCreateDialog = true;
    },
    
    // 添加复现步骤
    addStep() {
      this.newBug.steps.push('');
    },
    
    // 移除复现步骤
    removeStep(index) {
      this.newBug.steps.splice(index, 1);
    },
    
    // 处理图片上传
    handleImageChange(file) {
      // 处理图片上传逻辑
    },
    
    // 提交缺陷
    submitBug() {
      this.$refs.bugForm.validate(async (valid) => {
        if (valid) {
          try {
            // 提交缺陷逻辑
            this.showCreateDialog = false;
            this.$message.success('缺陷提交成功');
          } catch (error) {
            this.$message.error('提交失败');
          }
        }
      });
    },
    
    // 添加评论
    addComment() {
      if (!this.newComment.trim()) return;
      
      const comment = {
        id: Date.now(),
        user: {
          name: '当前用户',
          avatar: 'https://api.dicebear.com/7.x/avatars/svg?seed=Felix'
        },
        content: this.newComment,
        time: new Date().toLocaleString()
      };
      
      this.currentBug.comments.push(comment);
      this.newComment = '';
    },
    
    // 解决缺陷
    resolveBug() {
      this.$confirm('确认将该缺陷标记为已解决？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.currentBug.status = 'resolved';
        this.$message.success('已标记为解决');
      });
    },
    
    // 分配处理人
    assignBug() {
      // 分配处理人逻辑
    },
    
    // 刷新数据
    refreshData() {
      this.fetchBugs();
    },
    
    // 处理标签页切换
    handleTabClick(tab) {
      // 处理标签页切换逻辑
    }
  }
}
</script>

<style scoped>
.bug-center {
  padding: 2rem;
}

/* 统计卡片样式 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 2px 12px var(--shadow-color);
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.stat-icon.blue { background: rgba(64, 158, 255, 0.1); color: #409eff; }
.stat-icon.green { background: rgba(103, 194, 58, 0.1); color: #67c23a; }
.stat-icon.orange { background: rgba(230, 162, 60, 0.1); color: #e6a23c; }
.stat-icon.purple { background: rgba(180, 95, 210, 0.1); color: #b45fd2; }

.stat-info {
  flex: 1;
}

.stat-info h3 {
  font-size: 1.5rem;
  margin: 0;
  color: var(--text-primary);
}

.stat-info p {
  margin: 0.5rem 0 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.stat-trend {
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.stat-trend.up { color: #67c23a; }
.stat-trend.down { color: #f56c6c; }

/* 操作栏样式 */
.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.left-actions,
.right-actions {
  display: flex;
  gap: 1rem;
}

/* 缺陷列表样式 */
.bug-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

.bug-card {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid var(--border-color);
}

.bug-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px var(--shadow-color);
}

.bug-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.bug-id {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.bug-title {
  font-size: 1.1rem;
  margin: 0 0 0.5rem;
  color: var(--text-primary);
}

.bug-desc {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bug-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.bug-priority {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bug-priority.urgent { color: #f56c6c; }
.bug-priority.high { color: #e6a23c; }
.bug-priority.medium { color: #409eff; }
.bug-priority.low { color: #67c23a; }

.bug-assignee {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bug-date {
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bug-progress {
  margin-top: 1rem;
}

.progress-text {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* 详情弹窗样式 */
.bug-detail-dialog {
  .dialog-title {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
}

.detail-header {
  margin-bottom: 2rem;
}

.detail-header h2 {
  margin: 0 0 1rem;
  color: var(--text-primary);
}

.detail-meta {
  display: flex;
  gap: 2rem;
  color: var(--text-secondary);
}

.detail-section {
  margin-bottom: 2rem;
}

.detail-section h3 {
  margin-bottom: 1rem;
  color: var(--text-primary);
}

.image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
}

.comment-list {
  margin-bottom: 2rem;
}

.comment-item {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.comment-content {
  flex: 1;
  background: var(--bg-secondary);
  padding: 1rem;
  border-radius: 8px;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.comment-user {
  font-weight: 500;
  color: var(--text-primary);
}

.comment-time {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.comment-text {
  color: var(--text-primary);
  margin: 0;
}

.comment-input {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .bug-center {
    padding: 1rem;
  }
  
  .action-bar {
    flex-direction: column;
    gap: 1rem;
  }
  
  .right-actions {
    width: 100%;
  }
  
  .bug-cards {
    grid-template-columns: 1fr;
  }
}
</style> 